<!--
 * @Author: 王成杰
 * @Description: 订阅方式设置组件
 -->
<template>
  <div>
    <hxm-bottom-sheet
      popupHeight="5.7rem"
      :btns="btns"
      :tips="tips"
      v-model="baseInfo.isShowSubWay"
      :disableClose="disableClose"
      @confirm="confirm"
    >
      <div slot="body" class="body">
        <hxm-checkbox-group v-model="checkboxCell">
          <hxm-cell
            title="电脑客户端"
            :transparentBackground="true"
            :showBottomBorder="false"
            :showPadding="false"
          >
            <hxm-checkbox name="computer" slot="right"></hxm-checkbox>
          </hxm-cell>
          <hxm-cell
            title="手机客户端"
            :transparentBackground="true"
            :showBottomBorder="false"
            :showPadding="false"
          >
            <hxm-checkbox name="mobile" slot="right"></hxm-checkbox>
          </hxm-cell>
          <hxm-cell
            title="手机短信"
            :transparentBackground="true"
            :showBottomBorder="false"
            :showPadding="false"
          >
            <hxm-checkbox name="sms" slot="right"></hxm-checkbox>
          </hxm-cell>
        </hxm-checkbox-group>
      </div>
    </hxm-bottom-sheet>
  </div>
</template>

<script>
import { GET_SUB, SET_SUB } from '@/apis';
import { mapState } from 'vuex';
export default {
  name: 'Subscribe',
  props: {
    isShow: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      sub: false,
      selectList: [
        { id: 1, name: '电脑弹窗', isSelect: true, sourceType: 1, rename: 'computer' },
        { id: 3, name: '手机客户端消息', isSelect: false, sourceType: 2, rename: 'mobile' },
        { id: 4, name: '手机短信消息', isSelect: true, sourceType: 2, rename: 'sms' },
      ],
      selectMap: {
        computer: 1,
        mobile: 3,
        sms: 4,
      },
      setGray: false, //订阅状态
      subArr: [],
      subLock: false, //设置订阅状态请求锁
      checkboxCell: [],
      btns: [
        {
          type: 'confirm',
          text: '确定',
        },
      ],
      disableClose: false,
      tips: '提示：您可任选一种或两种提示方式，但由于运营或技术因素，可能存在延迟',
    };
  },
  watch: {
    isShow: {
      handler(newValue) {
        this.subscribeStatus();
      },
    },
    checkboxCell: {
      handler(newVale, oldValue) {
        if (String(newVale[newVale.length - 1]) === 'sms' && newVale.includes('mobile')) {
          newVale.forEach((element, index, arr) => {
            if (String(element) === 'mobile') {
              arr.splice(index, 1);
            }
          });
        } else if (String(newVale[newVale.length - 1]) === 'mobile' && newVale.includes('sms')) {
          newVale.forEach((element, index, arr) => {
            if (String(element) === 'sms') {
              arr.splice(index, 1);
            }
          });
        }
      },
    },
  },
  computed: {
    //状态
    ...mapState(['baseInfo']),
  },
  mounted() {
    this.subscribeStatus();
  },
  methods: {
    //订阅弹窗
    addSubscribe() {
      this.$emit('changeStatus', {
        showStatus: !this.isShow,
        setGray: this.subArr.length ? true : false,
      });
    },
    //订阅状态查询
    async subscribeStatus() {
      const param = {
        type: 3,
        data: true,
        credentials: 'include',
        version: getParam('product') === 'jtzz' ? 2 : 1,
      };
      const res = await GET_SUB(param);
      if (Number(res.code) === 0 && res.data) {
        let pushType = '';
        res.data.forEach(item => {
          pushType = item.push_type;
          if (pushType.length) {
            return;
          }
        });
        this.selectList.forEach((item, index) => {
          if (pushType.includes(item.id.toString())) {
            if (!this.checkboxCell.includes(item.rename)) {
              this.checkboxCell.push(item.rename);
            }
          }
        });
      }
    },
    async confirm() {
      if (!this.checkboxCell.length) {
        this.$toast('至少选择一种订阅方式');
        return;
      } else {
        const pushType = [];
        this.checkboxCell.forEach(item => {
          if (!pushType.includes(this.selectMap[item])) {
            pushType.push(this.selectMap[item]);
          }
        });
        const param = {
          pushtype: pushType.join(','),
          version: getParam('product') === 'jtzz' ? 2 : 1,
        };
        this.$store.commit('setBaseInfo', { pushType: param.pushtype });
        if (this.$store.state.baseInfo.gpcId) {
          param.gpc = this.$store.state.baseInfo.gpcId;
        }
        const res = await SET_SUB(param);
        if (Number(res.code) === 0 && res.data) {
          this.$toast(res.data);
          if (this.$store.state.baseInfo.gpcId) {
            this.$store.commit('setBaseInfo', { reload: 'loading' });
            this.$store.commit('setBaseInfo', {
              infoData: this.$store.state.baseInfo.infoData.toString(),
            });
          }
          return;
        }
        if (res && Number(res.data.code) === -2) {
          this.$toast(res.data);
          return;
        }
        this.$toast(res.data);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.body {
  font-size: 0.26rem;
}
.not_select_wrapper {
  width: 22px;
  height: 22px;
  border: 1px solid #d2d2d3;
  border-radius: 1rem;
}
.select_wrapper {
  width: 22px;
  height: 22px;
  border-radius: 1rem;
  background-color: #e93030;
}
.body_tip {
  color: #999999;
  padding: 0.36rem 0 0.32rem 0;
  border-bottom: 1px solid #eeeeee;
}
[theme-mode='black'] .body_tip {
  color: #999999;
  padding: 0.36rem 0 0.32rem 0;
  border-bottom: 1px solid #222222;
}
.unAuthorized {
  width: 100%;
  font-size: 0.5rem;
  color: #656565;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 10;
}
.mask,
.maskUnbind {
  z-index: 9;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
}
.check_box_wrapper {
  width: 94%;
  height: 0.48rem;
  margin-top: 0.2rem;
  padding-top: 0.2rem;
  line-height: 0.48rem;
  font-size: 0.32rem;
  color: #323232;
  margin-left: 0.2rem;
  border-top: 0.01rem solid #d4dde4;
  box-shadow: inset 0 0 0 0 #ebebeb;
}

.is_select_input {
  float: right;
  margin-top: 0.1rem;
}
.label_wrapper {
  display: flex;
  font-size: 0.24rem;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  margin-right: 0.24rem;
  padding: 0.32rem 0;
}
.correct {
  display: inline-block;
  width: 0.13rem;
  height: 0.02rem;
  background-color: #fff;
  line-height: 0;
  font-size: 0.32rem;
  vertical-align: middle;
  -webkit-transform: rotate(45deg);
  margin-top: 0.2rem;
  margin-left: 0.08rem;
}

.correct:after {
  content: '';
  display: block;
  width: 0.26rem;
  height: 0.02rem;
  background-color: #fff;
  -webkit-transform: rotate(-90deg) translateY(-50%) translateX(50%);
}

[theme-mode='black'] .unAuthorized {
  width: 100%;
  font-size: 0.5rem;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 10;
}
[theme-mode='black'] .check_box_wrapper {
  width: 94%;
  height: 0.48rem;
  margin-top: 0.2rem;
  padding-top: 0.2rem;
  line-height: 0.48rem;
  font-size: 0.32rem;
  color: #d2d2d3;
  margin-left: 0.2rem;
  border-top: 0.01rem solid #222222;
  box-shadow: inset 0 0 0 0 #222222;
}

[theme-mode='black'] .correct {
  display: inline-block;
  width: 0.18rem;
  height: 0.02rem;
  background-color: #fd4332;
  line-height: 0;
  font-size: 0.32rem;
  vertical-align: middle;
  -webkit-transform: rotate(45deg);
}

[theme-mode='black'] .correct:after {
  content: '';
  display: block;
  width: 0.36rem;
  height: 0.02rem;
  background-color: #fd4332;
  -webkit-transform: rotate(-90deg) translateY(-50%) translateX(50%);
}
</style>
